<template>
  <div>
    <checked-title title="各街办本月案件量 "></checked-title>
    <div id="caijiliang" style="height: 270px;"></div>
  </div>
</template>

<script>
import { ZhiHuiGongDiDB } from '@/api'

let chartRCJL = null

export default {
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (chartRCJL == null) {
      echarts.init(document.getElementById('caijiliang')).dispose()
    }
  },
  methods: {
    initChart() {
      ZhiHuiGongDiDB.getCaiJiLiang().then((res) => {
        let name = [],
          value = []

        for (let index = 0; index < res.data.length; index++) {
          name.push(res.data[index].name)
          value.push(res.data[index].value)
        }

        chartRCJL = echarts.init(document.getElementById('caijiliang'))

        let option = {
          tooltip: {
            trigger: 'axis',
            formatter: '{b}:\n{c}件',
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '4%',
            bottom: '2%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              splitArea: {
                // show: false,
                color: '#f00',
                lineStyle: {
                  color: '#f00',
                },
              },
              axisLabel: {
                color: '#fff',
                interval: 0,
                rotate: '45',
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              data: name,
            },
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)',
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                  color: '#d1e6eb',
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              type: 'line',
              smooth: true,
              showSymbol: false,
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#ffde32',
                },
              },
              itemStyle: {
                color: '#ffde32',
                borderColor: '#fff',
                borderWidth: 1,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },

              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(255,222,50,0.3)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(255,222,50,0.3)',
                      },
                    ],
                    false
                  ),
                  shadowColor: 'rgba(255,222,50,0.3)',
                  shadowBlur: 20,
                },
              },
              data: value,
            },
          ],
        }

        chartRCJL.setOption(option)
      })
    },
  },
}
</script>

<style lang="less" scoped></style>
